<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="layui-container">
    <div class="layui-input-inline">
        <input type="text" placeholder="根据用户id搜索购物车" class="layui-input" id="userId">
    </div>
    <button class="layui-btn layui-btn-normal" id="find"><i class="layui-icon">&#xe615;</i> </button>
    <table id="goods" lay-filter="goods"></table>
</div>
<script th:inline="javascript">
    layui.use(['table','element','form','layer'], function() {
        var table = layui.table,
            element = layui.element,
            form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        //页面初始化
        form.render();

        /**
         * 购物车表格
         */
        table.render({
            elem: '#goods'
            , url: 'shopcar/shopCarList' //数据接口
            , page: true //开启分页
            , limit: 5
            , limits: [5]
            , id: 'goods'
            , cols: [
                [ //表头
                    {field: 'id', title: 'ID', width: '5%', sort: true}
                    , {field: 'title', title: '标题', width: '30%'}
                    , {field: 'price', title: '单价', width: '10%', sort: true}
                    , {field: 'num', title: '数量', width: '10%', sort: true}
                    , {field: 'countMoney', title: '总价', width: '10%', sort: true}
                    , {field: 'specificationsInfo', title: '规格信息', width: '35%'}
                ]
            ]
        });

        /**
         * 条件查询
         */
        $("#find").click(function () {
            var userId = $("#userId").val();
            if(/^[0-9]*[1-9][0-9]*$/.test(userId)||userId==''){
                reloadTable();
            }else{
                layer.msg("请输入正整数");
            }
        })

        function reloadTable() {
            table.reload('goods',{
                where:{
                    userId: $("#userId").val()
                }
            })
        }





    })
</script>

</body>
</html>